<template>
	<view style="box-sizing: border-box;padding: 15rpx;">
		<!-- 模态框组件 -->
		<view  v-show="show.showFlag" @click="show.showFlag=false" class="motaikuang">
			<!-- 图片展示 -->
			<view class="imgShow">
				<button @click="show.showFlag=false" size="mini" class="close">X</button>
				<image :src="show.showURL"></image>
				<image style="margin-left: 10px;" :src="show.showURL"></image>
			</view>
			<!-- 操作 -->
			<view class="method">
				<button style="margin-right: 10px;" size="mini" @click="uploadFile()"> 下载图片 </button>
				<button size="mini" @getuserinfo="setUserHeader" type="warn" open-type="getUserInfo"> 设置为头像 </button>
				<button style="margin-left: 10px;" size="mini" open-type="share"> 转发该张  </button>
			</view>
		</view>
		<view style="padding: 10px;border: 1px solid #e0e0e0;">
			<!-- 引入用户卡片 -->
			<userSimpleInfo :userInfo="data.userInfo"></userSimpleInfo>
		</view>
			<!-- 帖子信息 -->
		<view class="nodeInfo" >
			<!-- 描述 -->
			<view> <text style="font-size: 30rpx;">{{data.node.nodeMess==null?'':data.node.nodeMess}}</text></view>
			<!-- 图片 -->
			<view class="images">
				<image v-for="item in data.node.arrImgs" @click="show.showURL=item;show.showFlag=true" :src="item"></image>
			</view>
			<!-- 标签 -->
			<view style="margin-top: 10rpx;">
				<button type="primary" @click="album(item.abId)" size="mini" v-for="item in data.tag">#{{item.abName}}</button>
				</view>
			<view class="methodF">
				<button class="icon iconfont" open-type="share" style="background: #F0AD4E;height: 100%;margin-right: 10px;" size="mini">&#xe739;</button>
				<button class="icon iconfont" v-show="collentFlag==-1" @click="collent"   style="background: #F0AD4E;height: 100%;margin-right: 10px;" size="mini">&#xe627;</button>
				<button class="icon iconfont" v-show="collentFlag==1"  @click="delCollent"  style="background: #F0AD4E;height: 100%;margin-right: 10px;" size="mini">&#xe684;</button>
				
				<button class="icon iconfont"  style="background: #F0AD4E;height: 100%;" size="mini" v-if="del">del</button>
			</view>
		</view>
		<!-- <view class="comment">
			<view class="box" v-for="item in data.comments">
				<text style="font-size: 30rpx;color: #808080;">{{item.comDate}}</text>
				<view style="padding: 10rpx;display: flex;" >
					<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="item.userHeader"></image>
					<text style="margin-left: 10rpx;margin-top: 25px;">{{item.userName}}</text>
				</view>	
				<text style="font-size: 30rpx;margin-top: 10rpx;">{{item.comMess}}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import userSimpleInfo from "../../compoent/userSimpleInfo/userSimpleInfo.vue"
	export default {
		components:{userSimpleInfo},
		data() {
			return {
				collentFlag:-1,
				nodeID:null,
				// 模态框展览的url
				show:{
					showURL:"https://waterghost.oss-cn-shenzhen.aliyuncs.com/root/9/85.jpg",
					showFlag:false
				},
				 data:null
			}
		},
		onLoad(id) {
			this.nodeID = id.id
		},
		onShareAppMessage() {
			return {
			   title: "快来领取好看的头像吧",
			   path: "/pages/details/details?id="+this.nodeID,
			   imageUrl:this.show.showURL==null?this.data.node.arrImgs[0]:this.show.showURL
			}
		},
		onReady() {
			var that = this
			// 请求接口
			uni.request({
				url:"https://app.waghost.com/api/node/getDetailNode/"+that.nodeID,
				method:"get",
				success(va) {
					that.data = va.data.data
				}
			})
		},
		methods: {
			delCollent(){
				var that = this
				uni.getStorage({
					key:"token",
					success(va) {
						that.collentFlag=-1
						uni.request({
							url:"https://app.waghost.com/api/collent/collentnode/"+that.nodeID+"/"+that.collentFlag,
							header:{
								"Authorization":"TOKEN "+va.data
							},
							method:"PUT",
							success(va) {
								uni.showToast({
									content:"取消成功"
								})
								that.is=false
							},
							
						})
					},
					fail() {
						uni.showModal({
							content:"请进行登录在操作"
						})
					}
				})
			
			},
			collent(){
				var that = this
				uni.getStorage({
					key:"token",
					success(va) {
						that.collentFlag=1
						uni.request({
							url:"https://app.waghost.com/api/collent/collentnode/"+that.nodeID+"/"+that.collentFlag,
							header:{
								"Authorization":"TOKEN "+va.data
							},
							method:"PUT",
							success(va) {
								uni.showToast({
									text:va.data.message
								})
								that.is=true
							},
							
						})
					},
					fail() {
						uni.showModal({
							content:"请进行登录在操作"
						})
					}
				})
			
			},
			album(abId){
				uni.navigateTo({
					url:"../album/album?abId="+abId
				})
			},
			uploadFile(){
				var that = this;
				// 下载文件
				uni.downloadFile({
					url: this.show.showURL, // 仅为示例，并非真实的资源
					success(res) {
						if (res.statusCode === 200) {
							// 下载完成返回临时存储路径
							var path = res.tempFilePath
							
								that.save(path)
								
							
						}
					}
				})
			},
			      save(url){
			              let _this = this;
			                uni.saveImageToPhotosAlbum({
			                    filePath: url,
			                    success: () => {
			                        uni.hideLoading();
			                       uni.showModal({
			                       	content:"成功"
			                       })
			                    },
			                    fail: () => {
			                        uni.hideLoading();
			                        uni.showModal({
			                        	content:"保存中失败"
			                        })
			                    },
			                    complete: () => {
			                    
			                    }
			                });
			          },
			setUserHeader(va) {
				// 下载文件
				uni.downloadFile({
					url: this.show.showURL, // 仅为示例，并非真实的资源
					success(res) {
						if (res.statusCode === 200) {
							// 下载完成返回临时存储路径
							var path = res.tempFilePath
							// 将该图片设置为头像 拉取用户授权
							qq.setCustomDress({
								action: "uploadAvatar",
								path: path,
								success(res) {
									uni.showToast({
										title:"设置成功-wG",
									})
								},
								fail(res) {
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.nodeInfo{
		margin-top: 10rpx;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
		padding: 30rpx;
	}
	.images{
		margin-top: 15rpx;
	}
	.images>image{
		width: 300rpx;
		height: 300rpx;
		margin-right: 10rpx;
	}
	.motaikuang{
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 3;
		background-color: rgba(0,0,0,0.5);
		position: fixed;

	}
	.imgShow{
		box-sizing: border-box;
		width: 100%;
		height: 1100rpx;
		padding: 100rpx;
		padding-top: 350rpx;
	}
	.imgShow>image{
		width: 250rpx;
		height: 250rpx;
		margin-left: 10rpx;
	
	}
	.imgShow>image:nth-child(2){
		border-radius: 50%;
	}
	.method{
		box-sizing: border-box;
		width: 100%;
		height: 300rpx;
		padding: 30rpx;
		text-align: center;
	}
	
	.close{
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.comment{
		width: 100%;
		border: 1px solid #e0e0e0;
		padding: 15rpx;
		margin-top: 10rpx;
		box-sizing: border-box;
	}
	.comment>.box{
		width: 100%;
		height: 300rpx;
	}
	.methodF{
		width: 100%;
		margin-top: 10px;
		height: 30px;
		text-align: right;
	}
</style>
